<script setup lang="ts">
import { useNavStore } from "@/stores/nav.ts";
import { computed, onMounted, ref } from "vue";
import { categoryApi, postApi } from "@/api";
import type { CategoryListVo, UserVo } from "@/type";
import { getUserInfo } from "@/utils/userInfo.ts";
import { message } from "ant-design-vue";
import { useCounterStore } from "@/stores/counter.ts";

const email = ref("");
const navStore = useNavStore();
const logoUrl =
  "https://public.readdy.ai/ai/img_res/303dfde6c3d1b6b43fa7af7d03120406.jpg";
const counterStore = useCounterStore();

const config = computed(() => counterStore.config);
const navItems = computed(() => navStore.getNav());
const hotCategories = ref<CategoryListVo[]>([]);
// 获取热门分类
const getHotCategories = async () => {
  const categories = await categoryApi.getCategoryList();
  // articleCount 根据文章数量进行排序
  hotCategories.value = categories.result
    .sort((a, b) => b.articleCount - a.articleCount)
    .slice(0, 4);
};
const userD = ref<UserVo>();
const user = async () => {
  userD.value = await getUserInfo();
};

const Subscribe = async () => {
  // 正则表达式邮箱
  const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  if (emailRegex.test(email.value)) {
    const res = await postApi.setSubscribe(email.value);
    if (res.status) {
      email.value = "";
      message.success("订阅成功");
    } else {
      message.error(res.message);
    }
    // } else {
    //   alert("请输入正确的邮箱");
  } else {
    message.warn("请输入正确的邮箱");
  }
};
onMounted(() => {
  getHotCategories();
  user();
});
</script>

<template>
  <!-- 页脚 -->
  <footer class="bg-gray-800 text-gray-300 py-8 sm:py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
      <div
        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 mb-6 sm:mb-8"
      >
        <!-- Logo和社交 -->
        <div class="sm:col-span-2 lg:col-span-1">
          <div class="flex items-center mb-4">
            <img :src="logoUrl" alt="Logo" class="h-8 w-8 rounded-lg" />
            <span class="ml-2 text-xl font-medium text-white">思考与远方</span>
          </div>
          <p class="text-sm mb-4">
            {{ userD?.bio }}
          </p>
          <div class="flex space-x-4">
            <a
              :href="i.key"
              target="_blank"
              v-for="i in userD?.contactJson"
              class="text-gray-400 hover:text-white cursor-pointer"
            >
              <component :is="$antIcons[i.icon]"></component>
            </a>
          </div>
        </div>
        <!-- 快速链接 -->
        <div>
          <h3 class="text-lg font-medium text-white mb-3 sm:mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li v-for="item in navItems" :key="item.key">
              <router-link
                :to="item.path"
                data-readdy="true"
                class="hover:text-white cursor-pointer text-sm sm:text-base"
                >{{ item.label }}</router-link
              >
            </li>
          </ul>
        </div>
        <!-- 热门分类 -->
        <div>
          <h3 class="text-lg font-medium text-white mb-3 sm:mb-4">热门分类</h3>
          <ul class="space-y-2">
            <li v-for="category in hotCategories" :key="category.id">
              <router-link
                :to="'/category?id=' + category.id"
                class="hover:text-white cursor-pointer text-sm sm:text-base"
              >
                {{ category.name }}
              </router-link>
            </li>
          </ul>
        </div>
        <!-- 订阅 -->
        <div class="sm:col-span-2 lg:col-span-1">
          <h3 class="text-lg font-medium text-white mb-3 sm:mb-4">订阅更新</h3>
          <p class="text-sm mb-4">
            订阅我们的技术周刊，获取最新技术资讯和教程。
          </p>
          <div class="flex flex-col sm:flex-row gap-2">
            <a-input
              placeholder="输入您的邮箱"
              class="w-full"
              v-model:value="email"
            />
            <a-button
              type="primary"
              @click="Subscribe"
              class="whitespace-nowrap cursor-pointer"
            >
              订阅
            </a-button>
          </div>
        </div>
      </div>
      <div class="pt-6 sm:pt-8 border-t border-gray-700 text-sm text-center">
        <div>
          <p class="text-gray-400">
            {{ config.copyright }}
          </p>
          <p class="text-gray-400">
            <a
              href="https://beian.miit.gov.cn/"
              target="_blank"
              class="text-gray-400 hover:text-white"
            >
              {{ config.icp }}
            </a>
          </p>
        </div>
      </div>
    </div>
  </footer>
</template>

<style scoped>
/* 针对移动端优化Ant Design组件样式 */
@media (max-width: 640px) {
  :deep(.ant-input) {
    height: 40px;
    font-size: 14px;
  }

  :deep(.ant-btn) {
    height: 40px;
    padding: 0 16px;
  }
}
</style>
